<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>


<body>

    <div class="suspension">
        <div class="headset">
            <img src="./images/home/headset.png">
        </div>
        <div class="smallshopcart">
            <img src="./images/home/smallshopcart.png">
        </div>
    </div>

    <div class="page-title">服饰鞋帽</div>

    <div class="main">
        <div class="bigimg">
            <img src="./images/home/1.webp">
        </div>

        <div class="content">
            <div class="content-top">
                <img src="./images/home/24.webp">
                <img src="./images/home/3.webp">
            </div>
            <div class="content-bottom">
                <div class="content-bottom-left">
                    <img src="./images/home/4.webp">
                </div>
                <div class="content-bottom-right">
                    <div>
                        <img src="./images/home/5.webp" alt="">
                        <img src="./images/home/6.webp" alt="">
                    </div>
                    <div>
                        <img src="./images/home/28.webp" alt="">
                        <img src="./images/home/7.webp" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="discount">
            <img src="./images/home/discount10.webp">
            <img src="./images/home/discount20.webp">
            <img src="./images/home/discount30.webp">
        </div>

        <div class="exhibition">
            <img src="./images/home/21.webp">
        </div>

        <div class="capprty">
            <h3>CAPPRTY</h3>
            <div>X</div>
            <p class="text"> 欢迎顾客光临本小店，
                我们为您提供自家设计的精品帽子，
                如有疑问请咨询微信客服，
                或关注微信公众号了解更多店铺动态。
            </p>
        </div>

        <div class="goods">
            <div class="goods-title">- 人气热卖 -</div>
            <ul class="goodslist">
                <li class="goodslist-item">
                    <img src="./images/home/22.webp">
                    <p class="title">韩版手工纸草编防晒帽遮阳帽女沙滩帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/23.webp">
                    <p class="title">夏季遮阳帽女防晒遮脸出游百搭沙滩帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/24.webp">
                    <p class="title">沙滩英伦复古短檐麻纱潮定型韩版渔夫帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/25.webp">
                    <p class="title">英伦女士出游爵士帽礼帽冬季蓓蕾帽礼帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/26.webp">
                    <p class="title">宽檐防晒出游帽遮阳休闲平顶帽沙滩帽夏女帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/27.webp">
                    <p class="title">水手经典瓜皮冷帽春季针织毛线帽基础款帽子</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/6.webp">
                    <p class="title">草帽女小清新防晒太阳帽休闲遮阳帽盆帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/29.webp">
                    <p class="title">韩版休闲纯色简约套头帽毛线帽冬季潮女针织帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/30.webp">
                    <p class="title">纯羊毛帽子男女情侣针织帽简约套头帽毛线帽秋冬季</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
                <li class="goodslist-item">
                    <img src="./images/home/31.webp">
                    <p class="title">冬季蓓蕾帽礼帽秋冬天贝雷帽韩版毛呢百搭英伦</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <a class="home" href="./index.html">
            <div class="imgbox">
                <img src="./images/home/home.webp">
                <img class="active" src="./images/home/home-active.webp">
            </div>
            <p>首页</p>
        </a>
        <a class="category" href="./category.html">
            <div class="imgbox">
                <img src="./images/home/category.webp">
                <img class="active" src="./images/home/category-cative.webp">
            </div>
            <p>分类</p>
        </a>
        <a class="shopcart" href="./shopcart.html">
            <div class="imgbox">
                <img src="./images/home/shopcart.webp">
                <img class="active" src="./images/home/shopcart-active.webp">
            </div>
            <p>购物车</p>
        </a>
        <a class="individual" href="./individual.html">
            <div class="imgbox">
                <img src="./images/home/individual.webp">
                <img class="active" src="./images/home/individual-active.webp">
            </div>
            <p>我的</p>
        </a>
    </div>


</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>

</html>